<template>
  <div>
    <div class="contentxx">
      <van-sidebar v-model="activeKey">
        <div class="core-container">
          <div class="scroll-wrapper" ref="left">
            <div class="leftcontent">
              <van-sidebar-item
                v-for="(item, index) in goodInfo"
                :key="item.type"
                @click="touch(index)"
                :title="item.name"
              />
            </div>
          </div>
        </div>
      </van-sidebar>
      <div class="rightcontent">
        <div class="core-container">
          <div class="scroll-wrapper" ref="scroll">
            <div class="scroll-content">
              <div
                v-for="(item, index) in goodInfo"
                :key="index"
                class="right-item"
              >
                <p class="item1">{{ item.name }}</p>
                <div
                  class="rightcontentbar"
                  v-for="(food, index) in item.foods"
                  :key="index"
                >
                  <img :src="food.icon" alt="" />
                  <div class="item">
                    <p>{{ food.name }}</p>
                    <span class="box1">{{ food.description }}</span>
                    <div>
                      <span class="box2">月售{{ food.sellCount }}份</span>
                      <span>好评率{{ food.rating }}%</span>
                    </div>
                    <div class="boxitem">
                      <span class="box3">￥{{ food.price }}</span>
                      <div>
                        <i   @click="addNum(food,$event)"
                            class="iconfont icon-tianjia1"
                        ></i>
                        <span class="icon2" v-show="valName(food)">{{valName(food)}}</span>
                        <i
                          v-show="valName(food)"
                          class="iconfont icon-jianshao"
                          @click="jNum(food)"
                        ></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
import BScroll from "@better-scroll/core";
export default {
  name: "home",
  data() {
    return {
      activeKey: 0,
      valList: [],
      scrollY: 0,
      listHeight: []
    };
  },
  methods: {
    addNum(food,el) {
      const flag = this.valList.filter((item) => item.name === food.name);
      if (flag.length >= 1) {
        this.valList = this.valList.map((item) => {
          if (item.name === food.name) {
            item.num += 1;
          }
          return item;
        });
      } else {
        this.$set(food, "num", 1);
        this.valList.push(food);
      }
      // 触发小球动画
      this.$bus.$emit('add',el.target);
    },
    jNum(food) {
      const flag = this.valList.filter((item) => item.name === food.name);
      if (flag[0].num === 1) {
        this.valList = this.valList.filter((item) => item.name !== food.name);
      } else {
        this.valList = this.valList.map((item) => {
          if (item.name === food.name) {
            item.num -= 1;
          }
          return item;
        });
      }
    },

    touch(index) {
      let rightItems = this.$refs.scroll.getElementsByClassName("right-item");
      this.rights.scrollToElement(rightItems[index], 500);
    },
    init() {
      this.lefts = new BScroll(this.$refs.left, {
        probeType: 3,
        click: true,
      });
        this.rights = new BScroll(this.$refs.scroll, {
            click: true,
            probeType: 3,
        });
      this.rights.on("scroll", ({ y }) => {
        this.scrollY = Math.abs(Math.round(y+20));
      });
    },
    getHeight() {
      let rightItems = this.$refs.scroll.getElementsByClassName("right-item");
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < rightItems.length; i++) {
        height += rightItems[i].clientHeight;
        this.listHeight.push(height);
      }
    },
  },
  computed: {
    ...mapState(["goodInfo"]),
    valName() {
      return function (food) {
        const data = this.valList.filter((item) => item.name === food.name);
        return data.length >= 1 ? data[0].num : "";
      };
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.getHeight();
      this.$bus.$on("reduceFn",this.jNum)
    });

    this.$bus.$on("clearFn", () => {
      this.valList = [];
    });
    this.$bus.$on("addFn",this.addNum);
  },
  beforeDestroy(){
    this.$bus.$off("addFn")
    this.$bus.$off("reduceFn")
  },
  watch: {
    valList: {
      handler(newval, oldval) {
        this.$bus.$emit("newList", newval);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scope>
.contentxx {
  display: flex;
  .van-sidebar-item {
    padding: 0;
  }
  .leftcontent {
    background-color: #f3f5f7;
    .van-sidebar-item__text {
      font-size: 0.24rem;
      line-height: 0.24rem;
      padding-top: 0.4rem;
      width: 1.12rem;
      margin: 0 0.24rem;
      height: 0.67rem;
      border-bottom: 1px solid #dfe2e5;
    }
  }
  .rightcontent {
    width: 5.9rem;
    .van-sidebar {
      width: 5.9rem;
    }
    .item1 {
      font-size: 0.24rem;
      color: rgb(147, 153, 159);
      line-height: 0.52rem;
      padding-left: 0.28rem;
      background-color: #f3f5f7;
      border-left: 2px solid #d9dde1;
      height: 0.52rem;
    }
    .rightcontentbar {
      position: relative;
      display: flex;
      margin: 0.36rem;
      img {
        margin-right: 0.2rem;
        height: 0.95rem;
      }
      .item {
        widows: 100%;
        display: flex;
        flex-direction: column;
        p {
          font-size: 0.28rem;
          color: rgb(7, 17, 27);
          line-height: 0.28rem;
          margin-top: 0.04rem;
        }
        span {
          font-size: 0.2rem;
          color: rgb(147, 153, 159);
          line-height: 0.2rem;
          &.box1 {
            margin: 0.16em 0;
          }
        }
        .box2 {
          margin-right: 0.24rem;
        }
        .boxitem {
          width: 100%;
          display: flex;
          align-items: center;
          .box3 {
            font-size: 0.2rem;
            color: rgb(147, 153, 159);
            font-weight: normal;
            line-height: 0.48rem;
            margin-right: 0.16em;
          }
          i {
            position: absolute;
            right: 0;
            font-size: 0.4rem;
            color: skyblue;
          }
          .icon-jianshao {
            position: absolute;
            right: 0.9rem;
            font-size: 0.4rem;
            color: skyblue;
          }
          .icon2 {
            position: absolute;
            right: 0.58rem;
            bottom: -0.2rem;
            font-size: 0.2rem;
            line-height: 0.48rem;
            color: skyblue;
          }
        }
      }
    }
  }
}
.core-container {
  .scroll-wrapper {
    height: 8.888rem;
    position: relative;
    overflow: hidden;
  }
}
</style>